@import "../common/variables";
@import "../common/mixins";

.@{css-prefix} {
  &-radio {
    display: inline-block;
    padding-right: 10px;

    &-icon {
      border: 1px solid #CCC;
      border-radius: 50%;
      display: inline-block;
      position: relative;
      z-index: 10;
      vertical-align: bottom;
      pointer-events: none;
      > i {
        content: '';
        position: absolute;
        left: 50%;
        top: 50%;
        border-radius: 50%;
        background-color: currentColor;
        opacity: 0;
        transform: translate(-50%, -50%) scale(.1);
      }
    }

    &-text {
      margin-left: 1px;
      font-size: 15px;
      color: #666;
      pointer-events: none;
    }

    > input[type="radio"] {
      position: absolute;
      left: -9999em;
      &:checked + .@{css-prefix}-radio-icon {
        border-color: currentColor;
        > i {
          opacity: 1;
          transform: translate(-50%, -50%) scale(1);
          transition: all .2s ease-in-out;
        }
      }
      &:disabled ~ .@{css-prefix}-radio-text {
        color: #CCC;
      }
      &:disabled + .@{css-prefix}-radio-icon {
        border-color: #CCC;
        background-color: #F3F3F3;
        > i {
          background-color: #CCC;
        }
      }
    }
  }
}
